<template>
  <div>
    <div class="box">
      <!-- 头部导航栏 -->
      <el-row class="head" justify="space-between">
        <el-col :span="12" class="Left">
          <div></div>
          <div>商品分类设置</div>
        </el-col>
        <el-col :span="12" class="Right">
          <el-button type="success" @click="delarr">删除</el-button>
          <el-button type="success" @click="displayAdd">添加大分类</el-button>
          <el-button type="success" @click="query">搜索</el-button>
          <el-input v-model="queryId" placeholder="请输入查询分类id"></el-input>
        </el-col>
      </el-row>
      <!-- 表格部分 -->
      <div class="table">
        <el-table :data="tableData" border style="width: 100%" :header-cell-style="{ background: '#f5f7fa' }">
          <el-table-column label="选择" width="80">
            <template slot-scope="scope">
              <el-checkbox v-model="checkList[scope.$index]" @change="changeState(scope.row)"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="categoryId" label="分类ID" width="130">
          </el-table-column>
          <el-table-column label="分类名称" width="130">
            <template slot-scope="scope">
              <span v-if="scope.row.categoryId.length <= 2">├</span>
              <span v-else>&emsp;├</span>
              {{ scope.row.categoryName }}
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注">
          </el-table-column>
          <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
              <div>{{ scope.row.status ? "启用" : "禁用" }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="operator" label="操作人" width="80">
          </el-table-column>
          <el-table-column prop="operateDate" label="操作日期" width="180">
          </el-table-column>
          <el-table-column label="操作" width="230">
            <template slot-scope="scope">
              <el-button @click="update(scope.row)" type="text" size="small">修改</el-button>
              <el-button type="text" size="small" v-if="scope.row.categoryId.length <= 2" @click="addSon(scope.row)">
                添加子分类</el-button>
              <el-button type="text" size="small" @click="modifyState(scope.row)">{{ scope.row.status ? "禁用" : "启用" }}
              </el-button>
              <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 弹出框 -->
      <el-dialog :title="flag ? '新增' : '修改'" :visible.sync="display" width="30%" v-if="display" :before-close="fun">
        <span slot="footer" class="dialog-footer">
          <!-- 添加数据 表单 -->
          <el-form label-width="130px" :model="addList">
            <el-form-item label="上级分类名称:" v-if="!addfather">
              <el-select v-model="addList.categoryId" placeholder="请选择" :disabled="addfather != 1">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="分类id:" v-else>
              <el-input v-model="addList.categoryId" placeholder="请输入分类名称"></el-input>
            </el-form-item>
            <el-form-item label="分类名称">
              <el-input v-model="addList.categoryName" placeholder="请输入分类名称"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入备注"
                v-model="addList.remark">
              </el-input>
            </el-form-item>
          </el-form>
          <el-button @click="display = false">取 消</el-button>
          <el-button type="primary" @click="preservation()">保 存</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'form',

  data() {
    return {
      // 查询的id
      queryId: '',
      // 选出来删除的数据
      selectDelete: [],
      // 判断增加子分类还是父分类
      addfather: '',
      // 判断是添加还是修改 1是增加 其他是修改
      flag: '',
      // 表单数据
      tableData: [],
      // 选中状态
      checkList: [],
      // 弹出框
      display: false,
      // 弹出框的数据
      addList: {
        categoryId: '',
        categoryName: '',
        remark: '',
      },
      // 下拉栏的数据
      options: [],
      // 下拉栏选中的数据
      value: ''

    };
  },
  async created() {
    await this.getList()
    this.tableData.forEach(() => {
      this.checkList.push(false)
    });
  },

  mounted() {
    // 发送请求
  },

  methods: {
    //查询
    query() {
      axios.get(`/api/search/${this.queryId}`).then(res => {
        if (res.data.message === "查询成功") {
          this.$message.success(res.data.message)
        } else {
          this.$message.error(res.data.message)
        }
        this.tableData = res.data.data
      })
    },
    // 弹出框关闭时的回调
    fun() {
      this.addList = {
        categoryId: '',
        categoryName: '',
        remark: '',
      }
      this.display = false
    },
    // 批量删除
    delarr() {
      axios.post('/api/delete', this.selectDelete).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
        } else {
          this.$message.error(res.data.message)
        }
        this.selectDelete = []
        this.checkList = []
        this.getList()
        this.tableData.forEach(() => {
          this.checkList.push(false)
        });
      })

    },
    // 点击选框时候的回调
    changeState(e) {
      if (!this.selectDelete.includes(e.id)) {
        this.selectDelete.push(e.id);
      } else {
        this.selectDelete.splice(this.selectDelete.indexOf(e.id), 1);
      }
      console.log(this.selectDelete);
    },
    // 修改状态
    modifyState(e) {
      let i = 0
      if (e.status == 0) {
        i = 1
      } else {
        i = 0
      }
      axios.post(`/api/update/${e.id}`, { status: i }).then(res => {
        this.tableData = res.data.data
        if (res.data.status === 'success') {
          this.$message.success(res.data.message)
        } else {
          this.$message.error(res.data.message)
        }

        this.getList()
      })


    },
    // 请求数据
    async getList() {
      await axios.get('/api/data').then(res => {
        this.tableData = res.data.data
        this.tableData = this.tableData.sort((a, b) => {
          let aIndex = a.categoryId.length > 2 ? a.categoryId.slice(0, 2) : a.categoryId;
          let bIndex = b.categoryId.length > 2 ? b.categoryId.slice(0, 2) : b.categoryId;

          if (aIndex === bIndex) {
            return parseInt(a.categoryId) - parseInt(b.categoryId);
          } else {
            return parseInt(aIndex) - parseInt(bIndex);
          }
        });

        this.tableData.forEach(el => {
          this.options.push({
            value: el.categoryId,
            label: el.categoryName
          })
        });
      })
    },

    //打开添加页面
    displayAdd() {

      this.addList = {}
      this.display = true
      this.flag = 1
      this.addfather = 1

    },
    //关闭添加页面

    update(e) {
      this.addfather = 1
      this.flag = 0
      this.addList = JSON.parse(JSON.stringify(e))
      this.display = true

    },
    choice(e) {
      console.log(e);
    },
    // 删除数据
    del(e) {
      axios.post('/api/delete', e).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
        } else {
          this.$message.error(res.data.message)
        }
        this.getList()
      })
    },
    // 添加数据
    async add() {
      this.display = false
      this.addList.addfather = this.addfather
      const res = await axios.post('/api/add', this.addList)

      // 根据响应数据显示提示信息
      if (res.data.status === 'success') {
        this.getList()
        this.$message.success(res.data.message)
      } else {
        this.$message.error(res.data.message)
      }
    },
    // 修改
    updateData() {
      axios.post(`/api/edit/${this.addList.id}`, this.addList).then(res => {
        this.tableData = res.data.data
        if (res.data.status === 'success') {
          this.$message.success(res.data.message)
        } else {
          this.$message.error(res.data.message)
        }

        this.getList()
      })
    },
    // 增加子分类
    addSon(e) {
      this.addList.categoryId = e.categoryId
      this.display = true
      this.flag = 1
      this.addfather = 0
    },
    // 点击提交的时候判断
    preservation() {
      if (this.flag === 1) {
        this.add()
      } else {
        this.updateData()
      }
      this.display = false
      this.fun()
    }

  },
};
</script>
<style lang="scss" scoped>
.box {
  width: 1200px;
  margin: 0 auto;

  // background-color: pink;
  .head {
    height: 60px;
    background-color: #f9f9f9;
    // display: flex;
    // justify-self: self-start;

    .Left {
      // width: 133px;
      position: relative;

      div:first-of-type {
        width: 4px;
        height: 20px;
        background-color: #56b89d;
        position: absolute;
        top: 21px;
        left: -9px
      }

      div {
        width: 103px;
        line-height: 60px;
        font-size: 16px;
        color: #bbb7b7;
        font-weight: 700;
        margin-left: 25px;
      }
    }

    .Right {
      // width: 50%;
      margin-top: 10px;
      // margin-left: 250px;
      // width: 375px;
      display: flex;
      flex-direction: row-reverse;



      .el-button--success {
        width: 112px;
        background-color: #57ba9e;
        margin-left: 5px;
        margin-right: 5px;
      }

      .el-button--success:first-of-type {
        margin-right: 10px;
      }

    }

  }

  .table {
    width: 1120px;
    margin: 0 auto;
    margin-top: 50px;

    .el-button--text {
      color: #34a887;
    }
  }
}

::v-deep .el-dialog__header {
  background-color: #57b99e;
  color: #fff;
}

::v-deep .el-dialog__title {
  color: #fff;
}

::v-deep .el-button--primary {
  background-color: #57b99e;
}

::v-deep .el-button--default:hover {
  color: #57b99e;
  border-color: #57b99e;
  background-color: #baedde;
}

::v-deep .el-input--suffix .el-input__inner {
  padding-right: 218px;
}

::v-deep .el-select .el-input__inner:focus {
  border-color: #57b99e;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #57ba9e;
}

::v-deep .el-input__inner:focus {
  border: 1px solid #57ba9e;
}
</style>